

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <style>

        html, body {
            background: #031524;
            width: 100%;
            height: 100vh;
            overflow-x:hidden;
        }


        @keyframes loading-rotate-load{
            from{content: '加载中. .';}
            to{content: '加载中. . .';}
        }
        .main-loading-bg {
            /*background-color: rgba(0,0,0,.2);*/
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 99999;
            /*display: none;*/
        }

        .main-loading-bg>.load-container .load {
            width: 60px;
            height: 60px;
            background-color: #048bee;
            margin: 35vh auto 50px;
            filter: drop-shadow(1px 1px 5px rgba(0,0,0,.5));
            animation: rotateplane 1.2s ease-in-out;
            animation-iteration-count: infinite;
        }

        .main-loading-bg>.load-container .text {
            position: relative;
        }
        .main-loading-bg>.load-container .text:before {
            text-align: center;
            animation: loading-rotate-load 1.5s linear infinite;
            /*filter: drop-shadow(1px 1px 5px #FFF);*/
            content: '  加载中. .';
            position: absolute;
            font-size: 16px;
            bottom: 0px;
            left: 50%;
            color: #048bee;
            transform: translateX(-50%);
        }

        @keyframes rotateplane {
            0% {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }

            50% {
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            }

            100% {
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }
    </style>

    <% if (htmlWebpackPlugin.options.cdn) { %>
    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css"
          integrity="sha512-VJoGnoawFQ6KWebgnIV11okzXf+sJ4V2TZ6G3odIV4+TSlFuT1qnb2x996xYJc5Ni5tRarZgnmuE5AMjmUWiEA=="
              crossorigin="anonymous"
           /> -->
    <!-- <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%=css%>"
    integrity="sha512-VJoGnoawFQ6KWebgnIV11okzXf+sJ4V2TZ6G3odIV4+TSlFuT1qnb2x996xYJc5Ni5tRarZgnmuE5AMjmUWiEA=="
    crossorigin="anonymous" />
  <% } %> -->
    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>"></script>
    <% } %>
    <% } %>
    <!--	 获取经纬度 -->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <title>
        <%=htmlWebpackPlugin.options.title%>
    </title>
</head>

<body>
<div id="app"></div>
<div class="main-loading-bg">
    <div class="load-container">
        <div class="load"></div>
        <div class="text"></div>
    </div>
</div>
<!-- built files will be auto injected -->
</body>
</html>